<template>
  <div class="account-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <a-button @click="$router.back()" class="back-button">
        <template #icon>
          <ArrowLeftOutlined />
        </template>
        返回
      </a-button>
      <h1 class="page-title">账号详情</h1>
    </div>

    <!-- 页面内容 -->
    <a-spin :spinning="loading">
      <div v-if="account" class="account-detail-content">

        <div class="card-content">
          <div class="remark-content">
            <label style="color: yellow; font-size: large; font-weight: bolder;">此号编号： {{ account.number }}</label><br>
            <label>1、押金在账期结束后三天可退。邀请您俱乐部签约可免押，实名用户30%，未实名用户80%。</label><br>
            <label>2、租期为15M/日，结束号主可强制下线，可协商延期，但最长延期不超过3天。未打完损失由您承担</label><br>
            <label>3、如果您操作失误导致封号10年，需要赔偿150%的账号费用才能继续使用本平台</label><br>
            <label>4、下单后，我们会立即拉群，但不保证号主在线（若扫描登录），推荐您联系客服，对接日租单</label><br>
            <label>5、其他问题，以双方协商为准。祝您旗开得胜，把把得吃</label><br>
          </div>
        </div>

        <!-- 信息卡片区域 -->
        <div class="info-cards-container">
          <!-- 基本信息卡片 -->
          <a-card title="基本信息" class="info-card">
            <div class="card-content">
              <div class="info-item">
                <span class="info-label">区服</span>
                <a-tag :color="account.server === 'QQ' ? 'blue' : 'green'" class="info-value">{{ account.server
                }}</a-tag>
              </div>
              <div class="info-item">
                <span class="info-label">段位</span>
                <a-tag :color="getRankColor(account.rank)" class="info-value">{{ account.rank }}</a-tag>
              </div>
              <div class="info-item">
                <span class="info-label">等级</span>
                <span class="info-value">{{ account.level || '未知' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label" style="color: red;">登录方式</span>
                <a-tag :color="account.loginMethod === '扫码登录' ? 'orange' : 'purple'" class="info-value">{{
                  account.loginMethod }}</a-tag>
              </div>
              <div class="info-item">
                <span class="info-label">体力等级</span>
                <span class="info-value">{{ account.energyLevel || '未知' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">负重等级</span>
                <span class="info-value">{{ account.weightLevel || '未知' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">外观</span>
                <a-tag color="purple" class="info-value">{{ account.appearance }}</a-tag>
              </div>
              <div class="info-item">
                <span class="info-label">账号记录</span>
                <a-tag :color="account.accountRecord === '无封禁记录' ? 'green' : 'red'" class="info-value">{{
                  account.accountRecord }}</a-tag>
              </div>
              <div class="info-item">
                <span class="info-label">上架时间</span>
                <span class="info-value">{{ formatDate(account.updatedAt) }}</span>
              </div>
            </div>
          </a-card>

          <!-- 资产信息卡片 -->
          <a-card title="资产信息" class="info-card">
            <div class="card-content">
              <div class="info-item">
                <span class="info-label">总资产</span>
                <span class="info-value highlight">{{ account.totalAssets }} M 哈弗币</span>
              </div>
              <div class="info-item">
                <span class="info-label">纯币资产</span>
                <span class="info-value highlight">{{ account.coinAssets }} M 哈弗币</span>
              </div>
              <div class="info-item">
                <span class="info-label">安全箱</span>
                <a-tag :color="getSafetyBoxColor(account.safetyBox)" class="info-value">{{
                  formatSafetyBox(account.safetyBox) }}</a-tag>
              </div>
              <div class="info-item">
                <span class="info-label">AWM子弹</span>
                <span class="info-value">{{ account.awmBullets || '0' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">六级甲</span>
                <span class="info-value">{{ account.level6A || '0' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">六级子弹</span>
                <span class="info-value">{{ account.level6Bullets || '0' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">咖啡豆</span>
                <span class="info-value">{{ account.coffeeBeans || '0' }}</span>
              </div>
              <div class="info-item" v-if="account.weaponSkins && account.weaponSkins.length > 0">
                <span class="info-label">刀皮</span>
                <div class="weapon-skins">
                  <a-tag v-for="skin in account.weaponSkins" :key="skin" color="purple" size="small">{{ skin }}</a-tag>
                </div>
              </div>
              <div class="info-item">
                <span class="info-label" style="color: red; width: 100px;">备注信息</span>
                <div class="weapon-skins">
                  <span style="font-size: larger;border-width:3px;color: rebeccapurple;">{{ account.remark }}</span>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 备注信息卡片 -->
          <a-card title="仓库图片等" class="info-card" v-if="accountImages.length > 0">
            <a-image-preview-group>
              <a-image v-for="(image, index) in accountImages" :key="index" :src="image" :preview="{
                visible: previewVisible,
                onVisibleChange: (visible) => {
                  previewVisible = visible;
                }
              }" />
            </a-image-preview-group>
          </a-card>
        </div>

        <!-- 支付信息区域 - 移到外面独立显示 -->
        <div class="pay-footer" :class="{ 'unavailable': !canRent }">
          <div class="pay-content">
            <!-- 账号状态指示器 -->
            <div class="account-status" v-if="!canRent">
              <div class="status-indicator">
                <i class="iconfont icon-lock"></i>
                <span class="status-text">{{ getStatusText(account.status) }}</span>
              </div>
            </div>
            
            <!-- 价格信息区域 -->
            <div class="price-info-section">
              <div class="price-card rental-price">
                <div class="price-label">租金
                </div>
                <div class="price-value">¥{{ account.price }}</div>
              </div>
              <div class="price-card deposit-price">
                <div class="price-label">押金
                  <span class="deposit-rate">{{ userStore.userInfo?.isVerified ? '已实名(30%)' : '未实名(80%)' }}</span>
                </div>
                <div class="price-value">¥{{ calculatedDeposit }}</div>
              </div>
              <!-- <div class="price-card rent-time">
                <div class="price-label">租期</div>
                <div class="price-value">{{ account.rentTime }}</div>
              </div> -->
            </div>
            
            <!-- 操作按钮区域 -->
            <div class="action-section">
              <a-button 
                :type="canRent ? 'primary' : 'default'" 
                @click="handleRent" 
                :disabled="!canRent" 
                size="large"
                class="rent-button"
                :class="{ 'unavailable-button': !canRent }"
              >
                <template v-if="!canRent">
                  <i class="iconfont icon-forbidden"></i>
                  账号不可用
                </template>
                <template v-else>
                  <i class="iconfont icon-pay"></i>
                  立即租用
                </template>
              </a-button>
            </div>
          </div>
          
          <!-- 不可用状态遮罩 -->
          <div v-if="!canRent" class="unavailable-overlay">
            <div class="unavailable-content">
              <i class="iconfont icon-close-circle"></i>
              <span>该账号暂时不可租用</span>
              <div class="unavailable-reason">状态：{{ getStatusText(account.status) }}</div>
            </div>
          </div>
        </div>
      </div>
      

      <!-- 空状态 -->
      <div v-else-if="!loading" class="empty-state">
        <a-empty description="账号不存在或已被删除">
          <a-button type="primary" @click="$router.back()">
            返回列表
          </a-button>
        </a-empty>
      </div>
    </a-spin>





    <!-- 租用确认弹窗 -->
    <a-modal v-model:open="rentConfirmVisible" title="确认租用" :confirm-loading="renting" @ok="confirmRent"
      @cancel="rentConfirmVisible = false" width="400px">
      <div v-if="account" class="rent-confirm-content">
        <div class="confirm-info">
          <h3 class="confirm-title">租用确认</h3>
          <div class="confirm-item">
            <span class="confirm-label">账号编号:</span>
            <span class="confirm-value">{{ account.number }}</span>
          </div>
          <div class="confirm-item">
            <span class="confirm-label">租用价格:</span>
            <span class="confirm-value price">¥{{ account.price }}</span>
          </div>
          <div class="confirm-item" v-if="calculatedDeposit > 0">
            <span class="confirm-label">押金:</span>
            <span class="confirm-value">¥{{ calculatedDeposit }} <small>({{ userStore.userInfo?.isVerified ? '已实名30%' :
                '未实名80%' }})</small></span>
          </div>
        </div>

        <a-alert message="请确认账号信息无误后进行支付" type="info" show-icon class="confirm-alert" />
      </div>
    </a-modal>
    <!-- 支付二维码弹窗 -->
    <a-modal v-model:open="qrModalVisible" title="扫码支付" :confirm-loading="paying" @ok="handlePaySuccess"
      @cancel="handleCancelPayment" width="400px">
      <div v-if="payQR" class="qr-code-modal-content">
        <div v-if="renting" class="payment-loading">
          <a-spin size="large" />
          <p style="margin-top: 16px; color: #666;">正在处理支付，请等待...</p>
          <p class="qr-title">请使用微信扫描下方二维码完成支付</p>
          <p class="qr-order">订单号: {{ payQR.outTradeNo }}</p>
          <div class="qr-image-container">
            <a-qrcode :value="payQR.codeUrl" :size="200" />
          </div>
          <a-alert message="支付成功后请不要关闭此窗口，系统将自动跳转" type="success" show-icon class="qr-alert" />
        </div>
      </div>
    </a-modal>
    <!-- 租赁流程须知弹窗 -->
    <a-modal v-model:open="rentalProcessVisible" title="租赁流程须知" :footer="null" width="500px">
      <div class="rental-process-content">
        <a-steps direction="vertical" :current="5" size="small">
          <a-step title="下单后">
            <template #description>
              <p>添加客服</p>
              <img style="width: 220px;" src="assets/images/kf.png"></img>
              <p><a href="https://work.weixin.qq.com/ca/cawcde4660d00e8b5a" target="_blank"><a-button
                    type="primary">添加客服</a-button></a></p>
            </template>
          </a-step>
          <a-step title="联系卖家">
            <template #description>
              <p>客服通知卖家进群，扫码或者账密登录使用</p>
            </template>
          </a-step>
          <a-step title="打完结算|到期结算">
            <template #description>
              <p>物资价格客服结算</p>
            </template>
          </a-step>
          <a-step title="完成交易">
            <template #description>
              <p>确认结单完成订单</p>
            </template>
          </a-step>
        </a-steps>
        <div style="text-align: center; margin-top: 20px;">
          <a-button type="primary" @click="rentalProcessVisible = false">我知道了</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import accountAPI from '~/api/account'
import orderAPI from '~/api/order'
import payAPI from '~/api/pay'

import { useUserStore } from "~/stores/user";
const userStore = useUserStore();

const route = useRoute()
const router = useRouter()

const account = ref(null)
const loading = ref(false)
const renting = ref(false)
const rentConfirmVisible = ref(false)
const qrModalVisible = ref(false)
const payQR = ref(null)
const paying = ref(false)
const rentalProcessVisible = ref(false)  // 添加付款后显示
let pollTimer = null

// 计算属性
const accountImages = computed(() => {
  if (!account.value?.image) return []

  try {
    const images = typeof account.value.image === 'string'
      ? JSON.parse(account.value.image)
      : account.value.image
    return Array.isArray(images) ? images : []
  } catch (e) {
    return []
  }
})

const canRent = computed(() => {
  return account.value?.status === '已上架'
})

// 动态计算押金
const calculatedDeposit = computed(() => {
  if (!account.value?.price) return 0

  // 检查用户是否实名认证
  const isVerified = userStore.userInfo?.isVerified || false

  // 实名认证用户30%，未实名用户80%
  const depositRate = isVerified ? 0.3 : 0.8

  return Math.round(account.value.price * depositRate)
})

// 获取账号详情
const fetchAccountDetail = async () => {
  const accountId = route.params.id
  if (!accountId) {
    message.error('账号ID不存在')
    return
  }

  loading.value = true
  try {
    const res = await accountAPI.getAccount(accountId)
    if (res.code === 200) {
      account.value = res.data
    } else {
      message.error(res.message || '获取账号详情失败')
    }
  } catch (error) {
    console.error('获取账号详情失败:', error)
    message.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 格式化函数
const formatDate = (ts) => {
  if (!ts) return '未知'
  const d = new Date(ts)
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString()
}

const formatAssets = (value) => {
  if (!value) return '0m'
  return (value / 1000000).toFixed(1) + 'm'
}

const formatRatio = (value) => {
  if (!value) return '1:1'
  return `1:${value}`
}

const formatSafetyBox = (safetyBox) => {
  if (!safetyBox) return ''
  return safetyBox.replace('安全箱', '').trim()
}

const getRankColor = (rank) => {
  const colorMap = {
    '无段位': 'default',
    '青铜': 'brown',
    '白银': 'silver',
    '黄金': 'gold',
    '铂金': 'cyan',
    '钻石': 'blue',
    '黑鹰': 'purple',
    '三角洲巅峰': 'red'
  }
  return colorMap[rank] || 'default'
}

const getSafetyBoxColor = (safetyBox) => {
  const colorMap = {
    '顶级安全箱 (3x3)': 'red',
    '高级安全箱 (2x3)': 'orange',
    '进阶安全箱 (2x2)': 'blue',
    '基础安全箱 (1x2)': 'green'
  }
  return colorMap[safetyBox] || 'default'
}

const getStatusColor = (status) => {
  const colorMap = {
    '待审核': 'orange',
    '已上架': 'green',
    '已下架': 'default',
    '已出租': 'blue',
    '已消耗': 'red',
    '审核失败': 'red'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status) => {
  const textMap = {
    '待审核': '待审核',
    '已上架': '已上架',
    '已下架': '已下架',
    '已出租': '已出租',
    '已消耗': '已消耗',
    '审核失败': '审核失败'
  }
  return textMap[status] || status
}

// 事件处理
const previewImage = (image, index) => {
  // 图片预览功能由 a-image-preview-group 自动处理
}

const handleRent = () => {
  if (!canRent.value) {
    message.warning('该账号暂不可租用')
    return
  }

  // 显示租用确认弹窗
  rentConfirmVisible.value = true
}

async function pollLatestOrder() {
  if (!account.value?._id) return
  try {
    const res = await orderAPI.getLatestOrderByAccount(account.value._id)
    if (res?.code === 200 && res?.data && res?.data?.status && res.data.status !== '待支付') {
      // 订单已创建且回调结算完成
      qrModalVisible.value = false
      payQR.value = null
      clearInterval(pollTimer)
      pollTimer = null
      message.success('支付成功，订单已创建！')
      // 显示租赁流程须知弹窗
      rentalProcessVisible.value = true
      await fetchAccountDetail()
      renting.value = false // 支付成功，关闭loading状态


    }
  } catch { }
}

const confirmRent = async () => {
  try {
    renting.value = true
    // 创建意向支付二维码，传递计算的押金信息
    const payRes = await payAPI.createWechatOrderNative({
      accountId: account.value._id,
      deposit: calculatedDeposit.value,
      isVerified: userStore.userInfo?.isVerified || false
    })
    if (payRes?.success) {
      payQR.value = { outTradeNo: payRes.data.outTradeNo, codeUrl: payRes.data.codeUrl }
      qrModalVisible.value = true
      // 开始轮询是否产生最新订单
      if (pollTimer) clearInterval(pollTimer)
      pollTimer = setInterval(pollLatestOrder, 3000)
      // 不在这里关闭loading，让loading状态持续到支付完成
    } else {
      message.error(payRes?.message || '生成支付二维码失败')
      renting.value = false // 只有在失败时才关闭loading
    }
    rentConfirmVisible.value = false
  } catch (error) {
    console.error('租用失败:', error)
    message.error(error.response?.data?.message || '网络错误，请稍后重试')
    renting.value = false // 只有在失败时才关闭loading
  }
}

const handleContact = () => {
  message.info('联系功能开发中...')
  // TODO: 实现联系卖家逻辑
}

const handleShare = () => {
  const url = window.location.href
  if (navigator.share) {
    navigator.share({
      title: `账号详情 - ${account.value?.number}`,
      url: url
    })
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(url).then(() => {
      message.success('链接已复制到剪贴板')
    })
  }
}

const handlePaySuccess = async () => {
  qrModalVisible.value = false
  payQR.value = null
  renting.value = false // 重置为初始状态
  if (pollTimer) {
    clearInterval(pollTimer)
    pollTimer = null
  }
  await fetchAccountDetail() // 刷新账号状态
}

const handlePayCancel = () => {
  qrModalVisible.value = false
  payQR.value = null
  renting.value = false // 关闭loading状态
  if (pollTimer) {
    clearInterval(pollTimer)
    pollTimer = null
  }
}

const handleCancelPayment = () => {
  qrModalVisible.value = false
  payQR.value = null
  renting.value = false // 重置为初始状态
  if (pollTimer) {
    clearInterval(pollTimer)
    pollTimer = null
  }
  message.info('已取消支付')
}

// 生命周期
onMounted(() => {
  fetchAccountDetail()
})

onUnmounted(() => {
  if (pollTimer) clearInterval(pollTimer)
})
</script>

<style scoped>
.account-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.back-button {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #333;
}

.account-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.account-number {
  font-size: 18px;
  color: #666;
  margin-bottom: 16px;
  font-weight: 500;
}

.info-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.info-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.info-card :deep(.ant-card-head) {
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
  min-height: 56px;
}

.info-card :deep(.ant-card-head-title) {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding: 16px 0;
}

.card-content {}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: #666;
  font-size: 16px;
}

.info-value {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.highlight {
  color: #333;
  font-weight: 700;
}

.weapon-skins {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.weapon-skins :deep(.ant-tag) {
  margin: 0;
}

.remark-content {
  padding: 16px;
  background-color: #3bac6a;
  border-radius: 8px;
  line-height: 1.6;
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

.image-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-item:hover {
  transform: scale(1.05);
}

.image-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

/* 支付底栏样式 */

.pay-card {
  position: sticky;
  bottom: 0;
  z-index: 1000;
  margin-top: 16px;
  display: flex;
  border-radius: 10px 10px 0 0;
  border-width: 0px;
  width: max-content;
}

.pay-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: linear-gradient(135deg, #1d2939 0%, #2d3748 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: all 0.3s ease;
  border-radius: 10px;
  &.unavailable {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);

    .pay-content {
      opacity: 0.6;
    }
  }

  .pay-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 2;
  }

  .account-status {
    display: flex;
    align-items: center;
    gap: 12px;

    .status-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(255, 77, 79, 0.1);
      border: 1px solid rgba(255, 77, 79, 0.3);
      border-radius: 8px;
      color: #ff4d4f;

      i {
        font-size: 16px;
      }

      .status-text {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  .price-info-section {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: center;

    .price-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 12px 16px;
      text-align: center;
      min-width: 100px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }

      .price-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 4px;
        font-weight: 500;
      }

      .price-value {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }

      &.rental-price .price-value {
        color: #ffd700;
      }

      &.deposit-price {
        .price-value {
          color: #ff9500;
        }

        .deposit-rate {
          font-size: 10px;
          color: rgba(255, 255, 255, 0.6);
          margin-top: 2px;
          font-weight: 500;
        }
      }

      &.rent-time .price-value {
        color: #40a9ff;
        font-size: 16px;
      }
    }
  }

  .action-section {
    .rent-button {
      height: 48px;
      padding: 0 32px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 12px;
      border: none;
      background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
      box-shadow: 0 4px 16px rgba(24, 144, 255, 0.4);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      i {
        font-size: 18px;
      }

      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(24, 144, 255, 0.6);
        background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      }

      &.unavailable-button {
        background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        box-shadow: 0 4px 16px rgba(108, 117, 125, 0.3);
        color: #adb5bd;

        &:hover {
          transform: none;
          box-shadow: 0 4px 16px rgba(108, 117, 125, 0.3);
          background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }
      }
    }
  }

  .unavailable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(73, 80, 87, 0.9) 0%, rgba(52, 58, 64, 0.9) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .unavailable-content {
      text-align: center;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;

      i {
        font-size: 32px;
        color: #ff4d4f;
        margin-bottom: 8px;
      }

      >span {
        font-size: 16px;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }

      .unavailable-reason {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 4px;
      }
    }
  }
}

/* 弹窗样式 */
.rent-confirm-content {
  .confirm-title {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
    font-size: 20px;
  }

  .confirm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .confirm-label {
    font-weight: 500;
    color: #666;
    font-size: 16px;
  }

  .confirm-value {
    font-weight: 600;
    color: #333;
    font-size: 16px;

    &.price {
      color: #333;
      font-weight: 700;
      font-size: 18px;
    }
  }

  .confirm-alert {
    margin-top: 20px;
  }
}

.qr-code-modal-content {
  text-align: center;
  padding: 20px;

  .qr-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
    font-weight: 500;
  }

  .qr-order {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666;
  }

  .qr-image-container {
    margin-bottom: 20px;
  }

  .qr-image {
    max-width: 200px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .qr-alert {
    margin-top: 20px;
  }

  .payment-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;

    p {
      margin-top: 16px;
      color: #666;
      font-size: 14px;
    }
  }
}

@media (max-width: 768px) {
  * {
    box-sizing: border-box;
  }

  .account-detail-page {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .info-cards-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .info-card :deep(.ant-card-body) {
    padding: 16px;
  }

  /* 支付底栏移动端适配 */
  .pay-footer {
    padding: 0;

    .pay-content {
      padding: 12px 16px;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }

    .account-status {
      justify-content: center;

      .status-indicator {
        padding: 6px 12px;
        font-size: 12px;

        i {
          font-size: 14px;
        }
      }
    }

    .price-info-section {
      gap: 8px;
      flex-wrap: wrap;
      justify-content: space-around;

      .price-card {
        padding: 8px 12px;
        min-width: 80px;
        flex: 1;
        max-width: 110px;

        .price-label {
          font-size: 10px;
          margin-bottom: 2px;
        }

        .price-value {
          font-size: 14px;
        }

        &.rent-time .price-value {
          font-size: 12px;
        }
      }
    }

    .action-section {
      .rent-button {
        height: 44px;
        padding: 0 24px;
        font-size: 15px;
        width: 100%;

        i {
          font-size: 16px;
        }
      }
    }

    .unavailable-overlay {
      .unavailable-content {
        i {
          font-size: 28px;
        }

        >span {
          font-size: 14px;
        }

        .unavailable-reason {
          font-size: 12px;
        }
      }
    }
  }
}
</style>